<template>
	<view class="red_content">
		<view class="balance-panel">
			<view class="title">{{$t('common.myBalance')}}($)</view>
			<view class="number">{{user.amount}}</view>
		</view>
		<view class="card">
			<view class="title">{{$t('home.red.pleaseEnter')}}</view>
			<input class="input" shape="circle" v-model="bonusCode"></input>
			<button :loading="loading" :disabled="loading" class="btn" @click="submit">{{$t('common.submit')}}</button>
		</view>
	</view>
</template>

<script>
	import {
		receiveBouns,
		getBalanceInfo
	} from "@/api/system/user.js"

	export default {
		data() {
			return {
				bonusCode: '',
				user: {},
				loading: false
			};
		},
		onLoad: function() {
			this.getBalanceInfoFun();

		},
		onNavigationBarButtonTap(e) {
			//e.index 如果是俩图标的话，index然后的0 或者1  就知道点击的哪个
			uni.navigateTo({
				url: '/pages/home/red_envelope_record'
			})
		},
		methods: {
			getBalanceInfoFun() {
				getBalanceInfo().then(rsp => {
					if (rsp.code == 200) {
						this.user = rsp.data;
						if (rsp.data.vip > 0) {
							this.isNoVip = false;
						}
					}
				});
			},
			submit() {
				if (!this.bonusCode) {
					uni.showToast({
						title: this.$t('home.red.pleaseEnter'),
						icon: 'error'
					})
					return;
				}
				this.loading = true;
				receiveBouns({
					'code': this.bonusCode
				}).then(rsp => {
					this.loading = false;
					this.getBalanceInfoFun();
					if (rsp.code == 200) {
						this.bonusCode = '';
						uni.showToast({
							title: this.$t('home.red.success'),
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: rsp.msg,
							icon: 'error'
						})
					}
				}).catch(() => {
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-box;
	}

	.red_content {
		box-sizing: border-box;
		overflow: hidden;
		padding: 10px 12px;

		.balance-panel {
			box-sizing: border-box;
			height: 100px;
			border-radius: 10px;
			overflow: hidden;
			padding: 16px 20px;
			background-color: $uni-color-primary;

			.title {
				font-size: 14px;
				font-weight: 500;
			}

			.number {
				margin-top: 16px;
				font-size: 22px;
				font-weight: 600;
			}
		}

		.card {
			height: 160px;
			background: $uni-color-box;
			color: white;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			margin-top: 10px;
			padding: 16px 20px;

			.title {
				color: $uni-color-subfont;
				font-size: 14px;
			}

			.input {
				border-radius: 40px 40px 40px 40px;
				height: 40px;
				border: 2px solid $uni-color-primary;
				text-align: center;
				margin-top: 10px;
				margin-bottom: 14px;
				font-size: 16px;
				color: white;
				font-weight: 500;
			}

			.btn {
				background-color: $uni-color-primary;
				border-color: $uni-color-primary;
				border-width: 1px;
				border-top-right-radius: 100px;
				border-top-left-radius: 100px;
				border-bottom-left-radius: 100px;
				border-bottom-right-radius: 100px;
			}
		}

	}
</style>